// 引入React库
import React from "react";

// 定义一个名为TabBar的函数组件,用于渲染一个底部导航栏.
const TabBar = () =>
{
    // react-router的api钩子，这个钩子用于在React应用中进行导航(页面跳转).
    const navigate = useNavigate();
    // react-router的URL钩子,这个钩子用于获取React应用的location对象,包含了当前URL的信息.
    const location = useLocation();
    // 这个就是使用useState钩子来创建一个状态变量active,用与存储和管理当前激活的TabBar项的key值.
    // 初始值设置为当前的location.pathname路径,如果没有则默认为'/'.
    const [active, SetActive] = useState<string>(location.pathname ?? '/');

    // 定义一个名为OnChange的函数,用于处理TabBar项的变化,接收一个参数key,参数类型未字符串(String).
    const OnChange = (key:string) =>
    {
        // 调用 SetActive 函数，并将key作为参数传递,SetActive的具体实现未在此代码段中定义.
        SetActive(key);
        // 调用 navigate 函数，并将key作为参数传递,navigate的具体实现未在此代码段中定义,通常用于路由跳转.
        navigate(key);
    }

    // 用于渲染TabBar
    return(
        <div className="footer">
            <React.UI.TabBar
                // 使用React.UI.TabBar组件.
                // 将OnChange函数作为onChange属性传递,当标签切换时触发.
                // 将active作为activeKey属性传递,用于指示当前激活的标签项.
                onChange={OnChange}
                activeKey={active}
            >
                {/*             
                // TabBar.Item 为 TabBar 的子组件.
                // key传递的属性参数,作为地址和标签项的唯一标识符.
                // icon属性为一个React组件,这里使用了React.Icons.AppOutline作为图标 .
                */}
                <React.UI.TabBar.Item
                    key={'/'}
                    title={'home'}
                    icon={<React.Icons.AppOutline />}
                />
                
                {/* 
                // TabBar.Item 为 TabBar 的子组件.
                // key传递的属性参数,作为地址和标签项的唯一标识符.
                // icon属性为一个React组件,这里使用了React.Icons.UserOutline作为图标 .
                */}
                <React.UI.TabBar.Item
                    key={'/business'}
                    title={'我的'}
                    icon={<React.Icons.UserOutline />}
                />
            </React.UI.TabBar>
        </div>
    )
}

// 导出TabBar组件,使其可以在其他文件中被导入和使用.
export default TabBar;